<template>
	<view class="content">
		<!-- 头部 -->
		<view class="helmet">
			<view class="tome">
				<view class="to_snum">
					
				</view>
			</view>
			<view class="to_state">
				<view class="to_icon">
					<view class="to_log">
						<image class="maxiconSize" src="@/static/device/wxinfo.svg" mode=""></image>
						<view class="register">
							<view class="">
								variable
							</view>
							<view class="">
								登录/注册
							</view>
						</view>
					</view>
					<view class="daily">
						<view class="diy_one">
							<u-icon class="setting" name="setting" color="#666666" size="32"></u-icon>
							<u-icon name="chat" color="#666666" size="32"></u-icon>
						</view>
						<view class="diy_two">
							<u-badge :is-dot="true" size="mini" type="error" class="badge" count="7"></u-badge>
							<u-icon name="calendar" color="#ffffff" size="30"></u-icon>
							<text>每日签到</text>
						</view>
					</view>
				</view>
				<view class="state_info">
					<view class="info_item">
						<view class="">
							18
						</view>
						<view class="">
							管理设备
						</view>
					</view>
					<view class="info_item">
						<view class="">
							5
						</view>
						<view class="">
							重要通知
						</view>
					</view>
					<view class="info_item">
						<view class="">
							300
						</view>
						<view class="">
							报警信息
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my_con">
			<view class="me_item quick_ser">
				<view class="ser_one">
					<DevTitle oneTle="快捷服务" twoTle="小工具在手，问题不再有" ></DevTitle>
					<view class="airlines">
						<u-icon name="kefu-ermai" size="32"></u-icon>
						<text>客服</text>
					</view>
				</view>
				<view class="quick_list">
					<view class="quick_item">
						<image src="@/static/device/yaopinshuomingshu.svg" mode=""></image>
						<text>维保手册</text>
					</view>
					<view class="quick_item">
						<image src="@/static/device/jianlirenyuanguanli.svg" mode=""></image>
						<text>人员管理</text>
					</view>
					<view class="quick_item">
						<image src="@/static/device/brush.svg" mode=""></image>
						<text>知识文档</text>
					</view>
					<view class="quick_item">
						<image src="@/static/device/sousuo1.svg" mode=""></image>
						<text>方案发现</text>
					</view>
					<view class="quick_item">
						<image src="@/static/device/pingtai_kemu.svg" mode=""></image>
						<text>第三方平台</text>
					</view>
					<view class="quick_item">
						<image src="@/static/device/dianziziyuandianzishu.svg" mode=""></image>
						<text>电子说明书</text>
					</view>
					<view class="quick_item">
						<image src="@/static/device/zaixiankefu.svg" mode=""></image>
						<text>在线客服</text>
					</view>
					<view class="quick_item">
						<image src="@/static/device/quanbu.svg" mode=""></image>
						<text>全部</text>
					</view>
				</view>
			</view>
			<view class="me_item">
				<DevTitle oneTle="基本服务" twoTle="一起来入驻吧"></DevTitle>
				<view class="basic_list">
					<view class="bas_item" @click="navTo('/pages/tome/personalInfo')">
						<view class="bas_tle">
							<image src="@/static/device/information.svg" mode=""></image>
							<text>个人信息</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
					<view class="bas_item">
						<view class="bas_tle">
							<image src="@/static/device/shangcheng.svg" mode=""></image>
							<text>我的商城</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
					<view class="bas_item">
						<view class="bas_tle">
							<image src="@/static/device/pingtai_kemu.svg" mode=""></image>
							<text>第三方平台设备</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
					<view class="bas_item">
						<view class="bas_tle">
							<image src="@/static/device/shezhi.svg" mode=""></image>
							<text>设置</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
					<view class="bas_item">
						<view class="bas_tle">
							<image src="@/static/device/weizhi.svg" mode=""></image>
							<text>位置管理</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
					<view class="bas_item" @click="navTo('/pages/tome/changePwd')">
						<view class="bas_tle">
							<image src="@/static/device/mima.svg" mode=""></image>
							<text>修改密码</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="me_item">
				<DevTitle oneTle="其他服务" twoTle="聆听您的建议"></DevTitle>
				
				<view class="basic_list">
					<view class="bas_item" @click="navTo('/pages/tome/helpCenter')">
						<view class="bas_tle">
							<image src="@/static/device/bangzhuzhongxin.svg" mode=""></image>
							<text>帮助中心</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
					<view class="bas_item" @click="navTo('/pages/tome/feedBack')">
						<view class="bas_tle">
							<image src="@/static/device/yijianfankui.svg" mode=""></image>
							<text>意见反馈</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
					<view class="bas_item">
						<view class="bas_tle">
							<image src="@/static/device/shield-full.svg" mode=""></image>
							<text>用户协议和隐私政策</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
					<view class="bas_item">
						<view class="bas_tle">
							<image src="@/static/device/gantanhao-quan.svg" mode=""></image>
							<text>关于设备管理系统</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
					<view class="bas_item">
						<view class="bas_tle">
							<image src="@/static/device/zaixiankefu.svg" mode=""></image>
							<text>联系客服</text>
						</view>
						<view class="">
							<u-icon name="arrow-right"  size="26"></u-icon>
						</view>
					</view>
			
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import DevTitle from "@/components/dev-title/index.vue"
	export default {
		components:{DevTitle},
		data() {
			return {
				plantTitle: '注塑机',
			};
		},
		mounted() {},
		methods: {
			showBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #fafafa;
		position: relative;
		.helmet {
			position: fixed;
			width: 100%;
			z-index: 9;
			background: #fafafa;

			.tome {
				position: relative;
				z-index: 1;
				background-color: $maincolor;
				@include box_rightBot_radius(100%);
				box-sizing: border-box;
				padding: 0 44rpx;
				.to_snum {
					padding: 12rpx 0 140rpx 0;
				}

			}

			.to_state {
				display: flex;
				flex-direction: column;
				position: relative;
				z-index: 9;
				margin: -105rpx 44rpx 44rpx 44rpx;
				@include box_shadow;
				border-radius: 24rpx;
				color: $bodyColor;
				background: #ffffff;
				padding: 30rpx 28rpx;
				box-sizing: border-box;

				.to_icon {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;
					.to_log{
						display: flex;
						align-items: center;
						.register{
							font-size: 24rpx;
							color: #666666;
							view:nth-child(1){
								margin-bottom: 12rpx;
							color: #333333;
							}
						}
						image{
							background-color: $maincolor;
							border-radius: 52rpx;
							margin-right: 24rpx;
							width: 104rpx;
							height: 104rpx;
						}
					}
					.daily{
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						.diy_one{
							margin-bottom: 24rpx;
							text-align: right;
							.setting{
								margin-right: 24rpx;
							}
						}
						.diy_two{
							position: relative;
							font-size:24rpx;
							color: #FFFFFF;
							background: $maincolor;
							padding:8rpx 20rpx;
							border-radius: 30rpx;
							text{
								margin-left: 10rpx;
							}
							/deep/ .u-badge{
								top: 0rpx !important;
								right: 0rpx !important;
								
							}
						}
					}
				}

				.state_info {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.info_item {
						display: flex;
						flex-direction: column;
						align-items: center;
						box-sizing: border-box;

						view:nth-child(1) {
							color: #3B86F8;
							font-size: 40rpx;
						}

						view:nth-child(2) {
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}


		}
		.my_con{
			display: flex;
			flex-direction: column;
			padding: 360rpx 24rpx 0 24rpx;
			position: relative;
			z-index: 6;
			.me_item{
				display: flex;
				flex-direction: column;
				z-index: -1;
				@include box_radius(24rpx)
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx 20rpx 10rpx 20rpx;
				margin-bottom: 30rpx;
				.basic_list{
					display: flex;
					flex-direction: column;
					.bas_item{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 42rpx;
						.bas_tle{
							display: flex;
							align-items: center;
							image{
								width: 34rpx;
								height: 34rpx;
								margin-right: 24rpx;
							}
							text{
								color: #666666 ;
								font-size: 28rpx;
							}
						}
					}
				}
			}
			.quick_ser{
				.ser_one{
					display: flex;
					justify-content: space-between;
					.airlines{
						text{
							margin-left: 10rpx;
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
				.quick_list{
					display: flex;
					flex-wrap: wrap;
					.quick_item{
						width: 25%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-bottom: 50rpx;
						image{
							width: 65rpx;
							height: 65rpx;
							margin-bottom: 20rpx;
						}
						text{
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}
		}
	}
</style>
